<template>
  <div>
    <HomeSearch
      :hot-search="hotSearchKeyword"
      :focus="searchFocus"
      @onChange="onChange"
      @onClear="onClear"
      @onConfirm="onConfirm"
      ref="searchBar"
    ></HomeSearch>
    <TagGroup
      header-text="热门搜索"
      btn-text="换一批"
      :value="hotSearchArray"
      @onBtnClick="changeHotSearch"
      @onTagClick="showBookDetail"
      v-if="hotSearchArray.length > 0 && !showList"
    ></TagGroup>
    <TagGroup
      header-text="历史搜索"
      btn-text="清空历史"
      :value="historySearch"
      @onBtnClick="clearHistorySearch"
      @onTagClick="searchKeyWord"
      v-if="historySearch.length > 0 && !showList"
    ></TagGroup>
    <SearchList
      :data="searchList"
      v-if="showList"
    ></SearchList>
  </div>
</template>

<script>
import TagGroup from '../../components/base/TagGroup'
import SearchTable from '../../components/search/SearchTable'
import HomeSearch from '../../components/home/HomeSearch'
import SearchList from '../../components/search/SearchList'
import {search, hotSearch} from '../../api'
import {getStorageSync, setStorageSync} from '../../api/wechat'

const KEY_HISTORY_SEARCH = 'historySearch'

export default {
  name: 'Search',
  components: {SearchList, HomeSearch, SearchTable, TagGroup},
  data () {
    return {
      searchFocus: true,
      hotSearch: [],
      hotSearchKeyword: '',
      historySearch: [],
      searchList: {},
      openId: '',
      page: 1
    }
  },
  computed: {
    showList () {
      const keys = Object.keys(this.searchList)
      return keys.length > 0
    },
    hotSearchArray () {
      const _hotSearch = []
      this.hotSearch.forEach(o => {
        _hotSearch.push(o.title)
      })
      return _hotSearch
    }
  },
  methods: {
    /**
     * 点击回车的事件
     * @param keyword
     */
    onConfirm (keyword) {
      //  1. 判断是否有搜索关键字
      if (!keyword || keyword.trim().length === 0) {
        //  没有关键字
        keyword = this.hotSearchKeyword
        this.$refs.searchBar.setValue(keyword)
      } else {
        //  有关键字
      }
      this.onSearch(keyword)
      //  2. 将搜索结果写入历史搜索
      if (!this.historySearch.includes(keyword)) {
        this.historySearch.push(keyword)
        setStorageSync(KEY_HISTORY_SEARCH, this.historySearch)
      }
      //  3. 将搜索黄失去焦点
      this.searchFocus = false
    },
    /**
     * 清除历史记录事件
     */
    clearHistorySearch () {
      console.log('clear....')
      this.historySearch = []
      setStorageSync(KEY_HISTORY_SEARCH, [])
    },
    /**
     * 搜索关键字事件
     * @param text
     */
    searchKeyWord (text) {
      this.$refs.searchBar.setValue(text)
      this.onSearch(text)
    },
    changeHotSearch () {
      hotSearch().then(res => {
        this.hotSearch = res.data.data
      })
    },
    showBookDetail (text, index) {
      console.log('detail', text, index)
    },
    onChange (keyword) {
      this.page = 1
      this.searchFocus = true
      if (!keyword || keyword.trim().length === 0) {
        this.searchList = {}
      }
      this.onSearch(keyword)
    },
    onSearch (keyword) {
      search({
        keyword,
        openId: this.openId
      }).then(res => {
        this.searchList = res.data.data
      })
    },
    onClear () {
      this.searchList = {}
    }
  },
  mounted () {
    this.page = 1
    this.openId = getStorageSync('openId')
    hotSearch().then(res => {
      this.hotSearch = res.data.data
    })
    this.historySearch = getStorageSync(KEY_HISTORY_SEARCH) || []
  },
  onPageScroll () {
    if (this.searchFocus) {
      this.searchFocus = false
    }
  },
  onReachBottom () {
    console.log('到达底部')
    if (this.showList) {
      this.page++
      const searchWord = this.$refs.searchBar.getValue()
      search({
        keyword: searchWord,
        openId: this.openId,
        page: this.page
      }).then(res => {
        console.log(res)
        const {book} = res.data.data
        if (book && book.length > 0) {
          this.searchList.book.push(...book)
        } else {
          console.log('没有更多了')
        }
      })
    }
  }
}
</script>
<style scoped>

</style>
